import { Button, Card, List, Tag } from "antd";
import { DndContext, useDraggable, useDroppable } from "@dnd-kit/core";
import './index.less'
import React, { Children, useContext } from "react";
import { DesignFrameworkContext } from "../../lowgo/design/DesignFramework";
import {
  cloneDeep,
  findContainerById,
  // findParentSchema,
  uniqueId,
  updatePrimaryKey,
} from "../../lowgo/shared";
import { SchemaFieldContext } from "../../lowgo/core/SchemaField";
import useDesignActions from "../../lowgo/design/useDesignActions";
import { useDrag } from "react-dnd";
const storeItems = [
  {
    title:"按钮",
    _id: uniqueId(),
    isAdd: true,
    properties: {
      "x-component": "Button",
      "x-component-props": {
        children: "按钮",
      },
    },
  },
  // {
  //   title:"容器",
  //   isContainer: true,
  //   _id: uniqueId(),
  //   isAdd: true,
  //   schema: {
  //     "x-component": "Container",
  //     "x-component-props": {

  //     },
  //   },
  // },

  {
    title:"网格",
    _id: uniqueId(),
    isAdd: true,
    isContainer: true,
    properties: {
      "x-component": "Grid",

      "x-component-props": {
        items: [
          {
            _id: uniqueId(),
            isContainer: true,
            flex: 1,
            properties: {
              "x-component": "Container",
              "x-component-props": {
                items: [
                  {
                    _id: uniqueId(),
                    label:'按钮',
                    properties: {
                      "x-component": "Button",
                      "x-component-props": {
                        children: "按钮",
                      },
                    },
                  },
                ],
              },
            },
          },
          {
            _id: uniqueId(),
            flex: 1,
            isContainer: true,
            properties: {
              "x-component": "Container",
              "x-component-props": {},
            },
          },
        ],
      },
    },
  },
  {
    title:"表格",
    _id: uniqueId(),
    isAdd: true,

    properties: {
      "x-component": "LowTable",
      "x-component-props": {
        columns: [
          {
            title: "谁谁谁",
          },
        ],
      },
    },
  },
  {
    title:"Tabs",
    _id: uniqueId(),
    isAdd: true,
    isContainer: true,
    properties: {
      "x-component": "LowTabs",
      "x-component-props": {
        items: [
          {
            _id: uniqueId(),
            title:'测试',
            value:1,
            properties: {
              "x-component": "Container",
              "x-component-props": {
                items: [
                  {
                    _id: uniqueId(),
                    label:'按钮',
                    properties: {
                      "x-component": "Button",
                      "x-component-props": {
                        children: "按钮",
                      },
                    },
                  },
                ],
              },
            },
          }
        ],
      },
    },
  },
];
const StoreItem = ({ item }: any) => {
  const { currentDesign } = useContext(
    DesignFrameworkContext
  );
  const { updateDesign, addMaterialToDesigner } = useDesignActions();
  const { items } = useContext(SchemaFieldContext);


  return (
    <div
    className="store-item"
      // ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}
    onClick={() => {
      let _item = cloneDeep(item)
      _item = updatePrimaryKey(_item);
      _item.key = uniqueId()
      const container = findContainerById(items.properties['x-component-props']['items'], currentDesign._id);
      
      if (container) {
        if (!Array.isArray(container.properties["x-component-props"]["items"])) {
          container.properties["x-component-props"]["items"] = [];
        }
        container.properties["x-component-props"]["items"].push(_item);

        updateDesign();
      } else {
        addMaterialToDesigner(_item);
      }
      console.log("containercontainer", container);
      
    }}
    >
     {item.title}
    </div>
  );
};
const Store = () => {
  return (
    <div>
      <List
      grid={{
        column:2,
        gutter:8
      }}
        dataSource={storeItems}
        renderItem={(item) => {
          return (
            <List.Item key={item._id}>
              <StoreItem item={item} />
            </List.Item>
          );
        }}
      />
    </div>
  );
};
export default Store;
